<template>
	<view>
		<view class="search">
			<uni-search-bar @confirm="search"></uni-search-bar>
		</view>
		<!-- 导航菜单 -->
		<view class="search-navbar-container">
			<view class="search-navbar-item" :class="activeNavbar === item.id ? 'navbar-text-active':''" @click="changNavbar(item)" v-for="item in navbarList" :key="item.id">
				<text class="search-navbar-text">{{item.name}}</text>
			</view>
		</view>
		<!-- 博客列表组件 -->
		<blog-list :blog-list="blogList"></blog-list>
		<!-- 是否还有数据组件 -->
		<blog-reach-bottom v-if="!hasData"></blog-reach-bottom>
		<!-- 版权组件 -->
		<copyright></copyright>
	</view>
</template>

<script>
	import blogApi from '@/api/blog.js'
	export default {
		data() {
			return {
				activeNavbar: 1, // 选中的菜单
				navbarList: [ // 菜单集合
					{id: 1,name: '发布时间',sortColumn: 'created_time'},
					{id: 2,name: '浏览次数',sortColumn: 'blog_read'},
					{id: 3,name: '评论次数',sortColumn: 'blog_comment'},
					{id: 4,name: '点赞次数',sortColumn: 'blog_goods'},
				],
				paramPage: {
					// 分页查询传参的page
					currentPage: 1,
					pageSize: 10,
					params: {
						// 自定义参数
					}
				},
				blogList: [], // 博客列表
				hasData: true // 是否还有数据，默认为true有数据
				
			}
		},
		onShow() {
			// 进入页面初始化数据
			const sortObj = {
				sortColumn: 'created_time',
				sortMethod: 'desc'
			};
			this.initData(sortObj);
		},
		methods: {
			// 监听改变后的菜单
			changNavbar(item) {
				this.activeNavbar = item.id
				const sortObj = {
					sortColumn: item.sortColumn,
					sortMethod: 'desc'
				};
				this.initData(sortObj)
			},
			initData(sortObj) {
				// 组装分页对象
				this.paramPage = {
					// 分页查询时用的参数
					currentPage: 1,
					pageSize: 10,
					params: {
						// 自定义参数
					},
					...sortObj
				};
				this.blogList = [];
				this.getBlogList();
				uni.stopPullDownRefresh();
			},
			// 查询博客列表
			getBlogList() {
				// 传递typeId
				this.paramPage.params.typeId = this.activeMenu;
				blogApi.getByPage(this.paramPage).then(async res => {
					let dataList = res.data.list;
					if (dataList[0]) {
						// 追加数据
						this.hasData = true;
						this.blogList.push(...dataList);
					} else {
						// 把hasData改为false
						this.hasData = false;
					}
				});
			},
			// 查询关键字，并跳转
			search(e) {
				uni.navigateTo({
					url:`../search-info/search-info?searchInfo=${e.value}`
				})
			}
		}
	}
</script>

<style>
@import url("./index.css");
</style>
